<template>
   <div class="person">
    <ul>
        <li v-for="item,value in list" :key="value">{{ item.name }}--{{ item.age }}--{{ item.id }}</li>
    </ul>
   </div>
</template>

<script setup name="Person01" lang="ts">
    import { defineProps,withDefaults } from 'vue'
    import {type Persons} from '../types'
    // 接收list 同时将props保存起来
    // let x = defineProps(['list'])
    // console.log(x)
    
    // 只接收a
    // defineProps(['a'])

    // 接收list+限制类型
    // defineProps<{list:Persons}>()

    // 接收list+限制类型+限制必要性+指定默认值 withDefaults() 是传默认值
    withDefaults(defineProps<{list?:Persons}>(),{
        list:()=>[{id:'slkfhjgfkjh01',name:'康师傅,王麻子',age:19}]
    })
    

</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button{
        margin : 0 10px;
    }
</style>